<template>
    <div class="contain">
        <el-form ref="form" :model="form" label-width="10px">
            <el-form-item>
                <el-input v-model="form.username" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.type" placeholder="通知状态">
                    <el-option label="管理员" :value=1></el-option>
                    <el-option label="普通用户" :value=2></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="fundTimeArray" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100px;" @click="getList()"><i
                        class="el-icon-search"></i>查询</el-button>
            </el-form-item>
        </el-form>
        <div class=" tab">
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane label="登录日志" name="menu" style='background-color:white'>
                    <div class="down-form">
                        <div class="table">
                            <el-table ref="logTable" :data="tableData" v-loading="loading" stripe border
                                :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                                style="width: 100%;font-size: 14px;color: #1f2d3d">
                                <el-table-column type="index" label="编码" align="center" width="150">
                                </el-table-column>
                                <el-table-column prop="username" label="登录账号" min-width="18%" show-overflow-tooltip
                                    align="center">
                                </el-table-column>
                                <el-table-column label="角色类型" min-width="18%" show-overflow-tooltip align="center">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.type === 1 ? '管理员' : '普通用户' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="email" label="邮箱" min-width="18%" show-overflow-tooltip
                                    align="center">
                                </el-table-column>
                                <el-table-column label="登录时间" min-width="18%" show-overflow-tooltip align="center">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.createtime.split('T')[0] }}</span>
                                        &nbsp;
                                        <span>{{ scope.row.createtime.split('T')[1].split('.')[0] }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="18%" show-overflow-tooltip align="center">
                                    <template slot-scope="scope">
                                        <el-button type="danger" @click="handleDel(scope.row)">删除记录</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="block">
                            <el-pagination @current-change="handleCurrentChange"
                                layout="total, sizes,prev, pager, next, jumper" :current-page.sync="form.currPage"
                                :page-size='form.currPage.pageNum' :page-sizes="form.pageSizeOptions" :total="form.total"
                                @size-change="handleSizeChange">
                            </el-pagination>
                        </div>
                        <!-- <poster-dialog ref="posterDialog"></poster-dialog> -->
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { formats } from "@/assets/js/formatDate.js"
export default {
    name: "menuSecond",
    data() {
        return {
            activeName: 'menu',
            total: 0,
            tableData: [],
            loading: false,
            fundTimeArray: [],
            form: {
                prentId: 0,
                currPage: 0,
                pageNum: 10,
                startDate: '',
                endDate: '',
                pageSizeOptions: [10, 15, 20, 25],
                total: 0,
                "page": 0,
                "pageSize": 10,
            }
        }
    },
    mounted() {
        this.getList()
    },
    watch: {
        //监听日期时间范围选择器 发生改变
        fundTimeArray() {
            let formatTimeArray = [];
            this.fundTimeArray.forEach(item => {
                formatTimeArray.push(formats.formatDate(item));
                this.form.startDate = formatTimeArray[0];
                this.form.endDate = formatTimeArray[1];
            })
        }
    },
    methods: {
        //获取数据
        getList() {
            console.log(this.form);
            this.$Axios({
                url: '/users/getLoginData',
                method: 'get',
                data: this.form,
                success: (result) => {
                    this.tableData = result.data;
                    this.form.total = result.total;
                    this.$message({
                        message: '获取菜单信息成功',
                        type: 'success',
                        duration: 2000
                    });
                    setTimeout(() => {
                        this.loading = false;
                    }, 200);
                    this.fundTimeArray = []
                }
            })
        },
        // 分页导航
        handleSizeChange(val) {
            this.form.pageNum = val;
            this.getList()
        },
        handleCurrentChange(val) {
            this.form.currPage = val;
            this.getList()
        },
        // 级别转文字
        typeFormatter(row, column) {
            const prentId = row.prentId
            if (prentId == 0) {
                return '一级'
            } else {
                return '二级'
            }
        },
        //查看下一级
        handleDetail(val) {
            this.$router.push({
                path: "/menu/menuSecond",
                query: {
                    prentId: val.id
                }
            })
        },
        //删除按钮
        handleDel(val) {
            console.log(val);
            this.$confirm('确认删除？')
                .then(_ => {
                    this.$axiosToken({
                        url: '/users/delLoginData',
                        method: 'get',
                        data: {
                            id: val.id
                        },
                        success: (result) => {
                            this.$message({
                                message: '删除日志成功',
                                type: 'success',
                                duration: 2000
                            });
                            setTimeout(() => {
                                this.loading = false;
                            }, 200);
                        }
                    })
                })
                .catch(_ => {
                    this.$message({
                        message: '已取消删除日志',
                        type: 'info',
                        duration: 2000
                    });
                });
        }
    }
}
</script>

<style scoped lang="scss">
.el-form-item {
    ::v-deep .el-form-item__content {
        .el-button {
            margin-left: 0;
        }
    }
}

::v-deep .el-table__body-wrapper {
    .el-table__body {
        .el-table__row {
            .cell {
                .el-button {
                    width: 50%;
                    margin-left: 0;
                }
            }
        }
    }
}

.cell {
    background-color: pink;
    // ::v-deep .el-button {
    //     width: none;
    //     margin-left: 0;
    // }
}

.tab {
    margin-top: 15px;
}

.el-form {
    display: flex;
}

.block {
    float: right;
    margin-top: 10px;
}

.el-button {
    width: 32%;
    margin-left: 34%;
}

::deep .el-page-header__left::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}

::deep .el-icon-back {
    font-weight: bold;
}

::deep .el-page-header__title {
    font-size: 14px;
    font-weight: bold;
}
</style>